<template>
  <Tab />
  <div class="container">
    <div class="content">
      <div class="top-container">
        <!-- 标题 -->
        <div class="title">
          <span>AI智能 #</span>
          <span>预定最佳机票</span>
        </div>

        <!-- 去哪里 -->
        <div class="tiket">
          <div class="center">
            <img src="../../static/img/air2.png" alt="" />
            <span>{{ toCity }}</span>
          </div>
        </div>

        <!-- 选择日期和位置 -->
        <div class="check-data-position">
          <div>
            <div class="position">
              <img src="../../static/img/location.png" alt="" />
              <span class="cut_one">{{ fromCity }}</span>
            </div>
            <img class="arrows" src="../../static/img/arrows.png" alt="" />
          </div>
          <div>
            <img src="../../static/img/date.png" alt="" />
            <span>{{ date }}</span>
            <span v-if="isNowDate">今天</span>
          </div>
        </div>

        <!-- 标签选择 -->
        <div class="tagList">
          <div
            class="tag"
            v-for="(item, index) in tagList"
            :key="index"
            @click="handleCheck(index, item)"
            :class="{ active: activeIndex === index }"
          >
            <span class="tagname"
              >{{ item.top }} <span class="key">{{ item.end }}</span></span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 下一步按钮 -->
  <div class="btn" @click="jumpNext">
    <span>下一步</span>
  </div>
</template>
<script setup>
import { uni } from "@dcloudio/uni-h5";
import { ref, toRefs, computed } from "vue";
import useStore from "../store/tiketStore.js";

let activeIndex = ref(0);
let store = useStore();
let { fromCity, toCity, date,isNowDate } = toRefs(store.parms);

let tagList = computed(() => {
  let list = [];
  let keys = ["最便宜", "最快速", "最早"];
  for (let i = 0; i < keys.length; i++) {
    list.push({
      top: `帮我找${fromCity.value}去${toCity.value}`,
      end: keys[i],
    });
  }
  return list;
});

function handleCheck(index, item) {
  activeIndex.value = index;
}

function jumpNext() {
  uni.navigateTo({
    url: "/pages/progress/index",
  });
}
</script>
<style scoped lang="scss">
.container {
  background-size: cover; /* 背景图覆盖整个元素 */
  // background-position: center; /* 背景图居中 */
  height: 100dvh; /* 高度设置为100%，根据实际情况调整 */
  width: 100dvw; /* 宽度设置为100%，根据实际情况调整 */
  position: fixed; /* 定位为固定，使得背景图覆盖整个页面 */
  top: 0;
  left: 0;
  // z-index: - 1;  /* 确保背景在其他内容之下 */
  background-image: url("../../static/img/background2.png");
  // border: 1px solid red;
}

.content {
  width: 664rpx;
  position: absolute;
  top: 650rpx;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;

  .top-container {
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      & > :nth-child(1) {
        width: 342rpx;
        height: 88rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 88rpx;
        color: #000000;
        line-height: 88rpx;
        text-align: center;
        font-style: normal;
      }
      & > :nth-child(2) {
        width: 528rpx;
        height: 88rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 88rpx;
        color: #0effaf;
        line-height: 88rpx;
        text-align: left;
        font-style: normal;
        background: linear-gradient(
          0deg,
          #2d94ff 0%,
          #4414f2 48%,
          #ff5e99 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-top: 10px;
      }
    }

    .tiket {
      width: 666rpx;
      height: 120rpx;
      background: #ffffff;
      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(171, 181, 191, 0.2);
      border-radius: 60rpx;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      .center {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 56rpx;
          height: 50rpx;
        }
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 40rpx;
          color: #000000;
          line-height: 52rpx;
          text-align: center;
          font-style: normal;
          margin-left: 10px;
        }
      }
    }
    .check-data-position {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;

      & > :nth-child(1) {
        width: 320rpx;
        height: 110rpx;
        background: #ffffff;
        border-radius: 70rpx;
        border: 2rpx solid #e4e9ef;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .position {
          display: flex;
          align-items: center;
          & > :nth-child(1) {
            width: 32rpx;
            height: 38rpx;
          }
          & > :nth-child(2) {
            width: 110rpx;
            height: 36rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 36rpx;
            color: #000000;
            line-height: 36rpx;
            text-align: center;
            font-style: normal;
            margin-left: 5px;
          }
        }

        .arrows {
          width: 30rpx;
          height: 16rpx;
        }
      }

      & > :nth-child(2) {
        width: 320rpx;
        height: 110rpx;
        background: #ffffff;
        border-radius: 70rpx;
        border: 2rpx solid #e4e9ef;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 40rpx;
          height: 32rpx;
          margin-right: 5px;
        }
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 36rpx;
          color: #000000;
          line-height: 36rpx;
          text-align: center;
          font-style: normal;
        }
      }
    }

    .tagList {
      margin-top: 10px;
      display: flex;
      flex-direction: column;

      .tag {
        width: 666rpx;
        height: 82rpx;
        background: #ffffff;
        border-radius: 36rpx;
        border: 2rpx solid #e4e9ef;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
        .tagname {
          &::before {
            content: "# ";
          }
          .key {
            color: #005ff9;
          }
          &::after {
            content: "的机票";
          }
        }
      }
    }
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 440rpx;
  height: 100rpx;
  background: #005ff9;
  border-radius: 54rpx;
  position: fixed;
  bottom: 122rpx;
  left: 50%;
  transform: translate(-50%, 0);

  span {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
  }

  &:active {
    background: #005ff9;
    border-radius: 54rpx;
    border: 2rpx solid #e4e9ef;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(171, 181, 191, 0.2);
    span {
      color: #ffffff;
    }
  }
}
.active {
  border: 2rpx solid #005ff9 !important;
  span {
    color: #005ff9 !important;
  }
}
</style>
